<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>animation</title>
	<style type="text/css">
		body {background: #abcdef;}
		div {
			position: relative;
			width: 760px;
			height: 760px;
			margin: auto;
			-webkit-transform-style:preserve-3d;
			-moz-transform-style:preserve-3d;
			-ms-transform-style:preserve-3d;
			-o-transform-style:preserve-3d;
			transform-style:preserve-3d;
		}
		div > div {
			position: absolute;
			top: 0;
			right: 0;
			bottom:0;
			left: 0;
			width: 100%;
			height:100%;
			margin: auto;
			background-repeat:no-repeat;
			background-position: center;
		}
		div > .inner {
			-webkit-animation:circle_inner linear 10s infinite; /*linear:线性过渡*/
		}
	</style>
</head>
<body>
	<div>
		<div class="inner"></div>
		<div class="middle"></div>
		<div class="outer"></div>
		<div class="imooc"></div>
	</div>
</body>
</html>